import React from 'react';
import ReactDOM from 'react-dom';
import '../../static/tero/table.less';
import Pop from '../tero/popup.jsx';
import $ from 'jquery'
import '../../static/app.css'
import u from '../../common'
import { LocaleProvider, Pagination } from 'antd';
import zh_CN from 'antd/lib/locale-provider/zh_CN';
import { Link } from 'react-router-dom'
import { message } from 'antd';
let query = document.querySelector.bind(document)
let queryAll = document.querySelectorAll.bind(document)
const type = u.getStore(type)



let load = true //节流
// document.onselectstart = function () { return false; };
class syTable extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            index: 1,
            display: 'none',
            list: [{ index: 1, flag: false, num: false, flag2: false, num2: false, gray: false }, { index: 2, flag: false, num: false, flag2: false, num2: false, gray: false }, { index: 3, flag: false, num: false, flag2: false, num2: false, gray: false }, { index: 4, flag: false, num: false, flag2: false, num2: false, gray: false }, { index: 5, flag: false, num: false, flag2: false, num2: false, gray: false }, { index: 6, flag: false, num: false, flag2: false, num2: false, gray: false }, { index: 7, flag: false, num: false, flag2: false, num2: false, gray: false }, { index: 8, flag: false, num: false, flag2: false, num2: false, gray: false }],
            flag: false,
            number: null,       //控制打开哪一个表格每行的弹框 每条的索引
            down: true,            //
            numflag: true,        //控制表格研判及箭头的弹出框
            operation: [],       //表格上方ul
            sentenceFlag: false, //表格上方研判按钮的弹出框flag
            current: 1,  //当前页数
            size: 7,    //每页显示条数
            total: 0,   //总条数
            pagesize: 0, //
            load: true,//节流
            del: '', //删除的参数
            checked: 0, //选中的个数
            startTime: "2018-09-11 00:00:00",
            endTime: "2018-09-11 23:59:59",
            more: true, //是否批量
            checkedArr: [],//选中的索引数组

        }
    }
    componentWillMount() {
        this.tableData()
    }

    handle(id) {
        const w = window.open('about:blank');
        w.location.href = 'http://localhost:3000/tero#/journa?' + id
    }
    tableData(page, startTime, endTime) {  //接口的调用数据的渲染
        let type = this.props.type
        let size = this.state.size
        let that = this
        this.setState(prevState => ({
            startTime: startTime,
            endTime: endTime
        }))
        u.queryList({
            "startTime": that.state.startTime,
            "endTime": that.state.endTime,
            "webSiteType": type,
            "page": page || 1,
            "size": size
        }, data => {
            load = true
            let arr = data.data
            arr.map((item, index) => {
                item.idIndex = (page ? (page - 1) : 0) * size + index + 1
                item.flag = false
                item.flag2 = false
                item.num = false
                item.num2 = false
                item.gray = false
                item.addTime = u.unixTime(item.addTime)
                item.poTime = u.unixTime(item.poTime)
            })
            that.setState(prevState => ({
                list: arr,
                total: parseInt(data.total),
                pagesize: parseInt(data.total / 7),
            }))
        }, (e) => {
            that.tableData(page,that.state.startTime,that.state.endTime)   //调用失败在调一次
        })
    }
    toogleClass() {
        var that = this;
        $(() => {
            $('.down_td').css('width', $('.table').outerWidth() + 'px')
            $(window).resize(() => {
                $('.down_td').css('width', $('.table').outerWidth() + 'px')
            })
            $('.app-top>ul>li').click(function () {
                if ($(this).text().includes("：") || !load) return;
                load = false;
                switch ($(this).text()) {
                    case '今日':
                        that.tableData(1, u.getDate(0, false), u.getDate(0, true));
                        break;
                    case '昨日':
                        that.tableData(1, u.getDate(1, false), u.getDate(1, true));
                        break;
                    case '近三日':
                        that.tableData(1, u.getDate(3, false), u.getDate(0, true));
                        break;
                    case '近七日':
                        that.tableData(1, u.getDate(7, false), u.getDate(0, true));
                        break;
                    default:
                        break;

                }
                if ($(this).index() == 5) {
                    $(this).siblings().css({ 'border': 'none', 'color': '#30383e' })
                    load = true;
                    return
                };
                $(this).css({ 'border': '1px solid #5286ff', 'color': '#5286ff' }).siblings().css({ 'border': 'none', 'color': '#30383e' }) //头部样式的切换
            })
            $('.app-conter-top>ul>li:nth-of-type(1)').removeClass('active').addClass('active_app')


            $(".app-conter-top>ul>li").click(function () {
                $(this).addClass('active_app').siblings().removeClass('active_app') //表格上方ul的切换

            })
        })
    }
    componentDidMount() {
        this.toogleClass()

    }
    check(arr) {  //选中的个数极其索引
        let brr = [];
        let length = arr.filter((item, index) => {
            return item.flag ? brr.push(index + 1) : ''
        }).length
        this.setState(prevState => ({
            list: arr,
            checked: length,
            checkedArr: brr
        }))
    }
    toggleAll() {   //全选的切换
        this.setState(prevState => ({
            flag: !this.state.flag
        }))
        let arr = this.state.list.slice(0)
        arr.forEach((item, index) => {
            arr[index].flag = !this.state.flag
        })
        this.check(arr);
    }
    toogle(index) { //单个的切换
        let arr = this.state.list.slice(0);
        arr[index].flag = !arr[index].flag;
        arr.some((item) => {
            return !item.flag
        }) ? this.setState(prevState => ({
            flag: false
        })) : this.setState(prevState => ({
            flag: true
        }))
        this.check(arr);
    }
    pop(index) { //控制打开pop遮罩弹框的类型
        this.setState(prevState => ({
            index: index,
            display: 'block',
        }))
        setTimeout(() => {
            this.setState(prevState => ({
                index: index,
                display: 'block',
            }))
        })
    }
    research(index) {  //研判
        if (this.state.more) {   //批量

        } else {    //单个
            let data = {}
            let number = this.state.number;
            this.state.list.some((item, index) => {
                if (index == number) {
                    data.index = item.index;
                    data.type = item.type;
                    data.id = item.id;
                    data.judgeType = index;
                }
            })
            u.yangpang({ data: data }, data => {
                if (index == 0) {
                    message.success( '研判案件', [1], )
                } else if (index == 1) {
                    message.success( '研判舆情', [1], )
                } else {
                    message.success( '研判情报', [1], )
                }
            })
            this.checkedReset()
        }

    }

    deleted() {     //删除
        if (this.state.more) {  //批量删除
            this.setState(prevState => ({
                more: false
            }))
            let del = ''
            let brr = this.state.list.slice(0);
            brr.filter((item, index) => {
                return item.flag
            }).forEach((item, index) => {
                del += item.index + '|' + item.type + '|' + item.id + ';'
            })
            for (let i = brr.length - 1; i >= 0; i--) {
                this.state.list[i].flag ? brr.splice(i, 1) : ''
            }
            del = del.substr(0, del.length - 1)
            u.del({ content: del }, data => {
                 message.success( '删除成功', [1], )
                this.setState(prevState => ({
                    list: brr
                }))
            })

        } else {   //单个删除
            let arr = this.state.list.slice(0);
            arr.splice(this.state.number, 1)
            u.del({ content: this.state.del }, data => {
                message.success( '删除成功', [1], )
                
                this.setState(prevState => ({
                    list: arr
                }))
            })
        }
    }
    read() {     
        if (this.state.more) {  //批量已阅
            let arr = this.state.checkedArr
            let length = arr.length;
            for (var i = 0; i < length; i++) {
                $('.table_list tr').eq(arr[i]).css({ color: '#ccc' })
            }
            this.checkedReset()
        } else {   //单个已阅
            $('.table_list tr').eq(this.state.number + 1).css({ color: '#ccc' })
        }
    }
    checkedReset(){   //选中重置
        let arr = this.state.list.slice(0);
        arr.forEach((item)=>{
            item.flag = false;
        })
        this.setState(prevState=>({
            list:arr
        }))
    }
    popProp(val, index) { // 用来关闭遮罩弹框
        this.setState(prevState => ({
            display: val
        }))
        switch (index) {
            case 0:

                break;
            case 1:
                this.deleted()
                break;
            case 2:
                this.research(0)
                break;
            case 3:

                break;
            case 4:

                break;
            case 5:

                break;
            case 6:

                break;
            case 7:

                break;
            case 8:
                this.read()
                break;
            case 9:
                this.research(1)
                break;
            case 10:
                this.research(2)
                break;
        }
    }
    down(e, index, num) { //控制table+-的内容显示及隐藏
        let arr = this.state.list.slice(0)
        arr[index].flag2 = !arr[index].flag2
        this.setState(prevState => ({
            list: arr
        }))
    }
    leave(index) { //控制鼠标离开关闭弹出框
        if (index == -1) {
            this.setState({
                sentenceFlag: false
            })
        } else {
            let arr = this.state.list.slice(0);
            arr[index].num = false;
            arr[index].num2 = false;
            this.setState(prevState => ({
                list: arr
            }))
        }

    }
    select() {
        return this.state.list.some((item, index) => {
            return item.flag
        })
    }

    itemRender = (current, type, originalElement) => {
        this.tableData(current)
        this.setState(prevState => ({
            current: current
        }))
        if (type === 'prev') {
            return <a>上一页</a>;
        } if (type === 'next') {
            return <a>下一页</a>;
        }
        return originalElement;
    }

    render() {
        return (
            <div className='table'>
                <Pop index={this.state.index} display={this.state.display} colse={this.popProp.bind(this)} />
                <div className='app-conter' style={{ padding: '0px' }}>
                    <p>共搜索到 <span>{this.state.total}</span> 条数据</p>
                    <div className='app-conter-div'>
                        <img src={require("../../static/image/blueTips.png")} />
                        <span> 已选择 {this.state.checked} 项 </span>
                        <span className='app-conter-div-lastspan'
                            onClick={() => {
                                this.select() ? this.pop(3) : this.pop(4)
                            }}
                        >清空</span>
                    </div>
                    <div className='app-conter-box'>
                        <div className='app-conter-top'>
                            <ul onClick={() => {
                                this.setState(prevState => ({
                                    more: true
                                }))
                            }}>
                                {
                                    this.props.operation.map((item, index) => {
                                        return (item == '研判' ? <li key={index} style={{ position: 'relative' }} onMouseLeave={() => {
                                            this.leave(-1)
                                        }} onClick={() => {
                                            this.select() ? this.setState(prevState => ({
                                                sentenceFlag: !this.state.sentenceFlag,
                                            })) : this.pop(4)
                                        }}>{item}
                                            <div onMouseLeave={() => {
                                                this.leave(-1)
                                            }} className={this.state.sentenceFlag ? 'research_son_two active_table_two' : 'research_son_two'} ><p onClick={() => {
                                                this.pop(2)
                                            }}>案件</p><p className='active_poptable' onClick={() => {
                                                this.pop(9)

                                            }}
                                            >舆情</p>
                                                <p onClick={() => {
                                                    this.pop(10)

                                                }}
                                                >情报</p></div>
                                        </li> : <li key={index}
                                            onClick={() => {
                                                if (this.select()) {
                                                    switch (item) {
                                                        case '导出':
                                                            this.pop(7)
                                                            break;
                                                        case '删除':
                                                            this.pop(1)
                                                            break;
                                                        case '加入样本库':
                                                            this.pop(5)
                                                            break;
                                                        case '标记已阅':
                                                            this.pop(8)
                                                            break;
                                                        default:
                                                            break;
                                                    }
                                                } else {
                                                    this.pop(4)
                                                }

                                            }}
                                        >{item}</li>)
                                    })
                                }
                            </ul>

                        </div>
                        <div>

                        </div>
                    </div>

                    <table className='table_list' style={{ marginBottom: '30px' }}>
                        <tbody>
                            <tr className='activee'>
                                <td><span className={this.state.flag ? 'active' : ''} onClick={() => {
                                    this.toggleAll()
                                }}></span></td>
                                <td>ID</td>
                                <td>标题</td>
                                <td>来源</td>
                                <td><span className='left'>发布时间</span><div className='tip'><span className='top'><img src={require('../../static/image/table_up.png')} alt="" /></span><span className='bottom'><img src={require('../../static/image/table_down.png')} alt="" /></span></div></td>
                                <td><span className='left'>监测时间</span><div className='tip'><span className='top'><img src={require('../../static/image/table_up.png')} /></span><span className='bottom'><img src={require('../../static/image/table_down.png')} /></span></div></td>
                                <td>操作</td>
                            </tr>
                            {
                                this.state.list && this.state.list.map((item, index) => {
                                    return (
                                        <tr key={index} className={item.flag2 ? 'bottom_td bxx' : 'bxx'}>

                                            {/* <td ><span className={item.flag ? 'active' : ''} onClick={() => {
                                                this.toogle(index)
                                            }}></span><span
                                                onClick={() => {
                                                    this.down(index)
                                                }}
                                            >{item.flag2 ? '-' : "+"}</span><div className={item.flag2 ? 'down_td last_tr down_pop' : 'down_td last_tr'}>
                                                    {this.props.baten ? 'མི་དམངས་ཉིན་རེའི་ཚགས་པར་གྱིས་དཔྱད་གཏམ་པའི་རྩོམ་ཡིག་འགོ་བརྗོད་དུ་ཕྱོགས་མང་རིང་ལུགས་རྒྱུན་འཁྱོངས་བྱས་ནས་གོ་ལའི་བཅོས་སྐྱོང་འཐུས་སྒོ་ཚང་དུ་གཏོང་དགོས་ཞེས་པ་སྟེ་ཀྲུའུ་ཞི་ཞི་ཅིན་ཕིང་གི་འབོ་གསེར་རྒྱལ་ཁབ་བཟོ་ཚོང་གླེང་སྟེགས་ཀྱི་གལ་ཆེའི་གསུང་བཤད་ཐེངས་ལྔ་པ་ཞེས་པ་སྤེལ་བ།ཀྲུང་དབྱང་རླུང་འཕྲིན་ལས་ཁུངས་ནས་གནས་ཚུལ་སྤེལ་གསལ། སྤྱི་ཟླ་༧པའི་ཚེས་༣༡ཉིན། མི་དམངས་ཉིན་རེའི་ཚགས་པར་གྱིས་དཔྱད་གཏམ་པའི་རྩོམ' +
                                                        '་ཡིག་འགོ་བམི་དམངས་ཉིན་རེའི་ཚགས་པར་གྱིས་དཔྱད་གཏམ་པའི་རྩོམ་ཡིག་འགོ་བརྗོད་དུ་ཕྱོགས་མང་རིང་ལུགས་རྒྱུན་འཁྱོངས་བྱས་ནས་གོ་ལའི་བཅོས་སྐྱོང་འཐུས་སྒོ་ཚང་དུ་གཏོང་དགོས་ཞེས་པ་སྟེ་ཀྲུའུ་ཞི་ཞི་ཅིན་ཕིང་གི་འབོ་གསེར་རྒྱལ་ཁབ་བཟོ་ཚོང་གླེང་སྟེགས་ཀྱི་གལ་ཆེའི་གསུང་བཤད་ཐེངས་ལྔ་པ་ཞེས་པ་སྤེལ་བ' : '一些用户经常需要查看的，或横向对比的信息用户可以省去不断点击查看详情，再返回来查看的麻烦当然，这里的内容形式不只是表格，也可以是段落，信息组，甚至图表...一些用户经常需要查看的，或横向对比的信'
                                                        + '发生地方的发生的的丰富的是非官方的和规范'}
                                                </div></td> */}
                                            <td ><span className={item.flag ? 'active' : ''} onClick={() => {
                                                this.toogle(index)
                                            }}></span><span
                                                onClick={(e) => {
                                                    this.down(e, index)
                                                }}
                                            >{item.flag2 ? '-' : "+"}</span><div className={item.flag2 ? 'down_td last_tr down_pop' : 'down_td last_tr'} dangerouslySetInnerHTML={{ __html: item.content }}>

                                                </div></td>
                                            <td>{item.idIndex}</td>
                                            <td>{item.title}</td>
                                            {/* <td>{this.props.baten ? 'ཁྲུན་ཁྲང་ཧྲེང་ཀུང་སིས་ཁྲིམས་འགལ་ལུགས་འགལ་ངང་ཁྱི་སྨྱོན་ནད་ཀྱི་འགོག་སྨན་ཐོ' : '从架构角度来看 Java 分布式日志如何收集'}</td> */}
                                            <td>{item.webSite}</td>
                                            {/* <td>{item.webSite || this.props.baten ? 'གལ་ངང་ཁྱི་སྨྱོན་ནད་ཀྱི' : '网易新闻App'}</td> */}
                                            <td>{item.poTime}</td>
                                            <td>{item.addTime}</td>
                                            <td onMouseLeave={() => {
                                                this.leave(index)
                                            }} onClick={() => {
                                                this.setState(prevState => ({
                                                    number: index,
                                                    more: false
                                                }))
                                            }}><div><span className='look'>
                                                    <Link to={`/journa/${JSON.stringify({ id: item.id })}`}>查看</Link>
                                                </span><span className='delete' onClick={() => {
                                                    this.pop(1)
                                                    this.setState(prevState => ({
                                                        dell: item.index + '|' + item.type + '|' + item.id,
                                                    }))
                                                }}>删除</span><span className='research'
                                                ><b onClick={() => {
                                                    this.setState(prevState => ({
                                                        numflag: true,
                                                    }))
                                                    item.num2 = false;
                                                    item.num = !item.num
                                                }} >研判</b>

                                                    {/* {
                                                        item.num2 ? <img src={require('../../static/image/up.png')} onMouseLeave={() => {

                                                        }} onClick={() => {
                                                            this.setState(prevState => ({
                                                                numflag: false
                                                            }))
                                                            item.num = false;
                                                            item.num2 = !item.num2
                                                        }} alt="" /> : <img src={require('../../static/image/down.png')} onMouseLeave={() => {

                                                        }} onClick={() => {
                                                            this.setState(prevState => ({
                                                                numflag: false
                                                            }))
                                                            item.num = false;
                                                            item.num2 = !item.num2
                                                        }}
                                                            alt="" />
                                                    } */}
                                                    {
                                                        !this.state.numflag ? <div onMouseLeave={() => {
                                                            this.leave(index)
                                                        }} className={index == this.state.number && (item.num || item.num2) ? 'research_son active_table' : 'research_son'} ><p onClick={() => {
                                                            this.pop(0)
                                                        }}>加入样本</p><p className='active_poptable' onClick={() => {
                                                            this.pop(8)
                                                        }}
                                                        >标记已阅</p></div> : <div onMouseLeave={() => {
                                                            this.leave(index)
                                                        }} className={index == this.state.number && (item.num || item.num2) ? 'research_son active_table' : 'research_son'} ><p onClick={() => {
                                                            this.pop(2)

                                                        }}>案件</p><p className='active_poptable' onClick={() => {
                                                            this.pop(9)
                                                        }}
                                                        >舆情</p>
                                                                <p
                                                                    onClick={() => {
                                                                        this.pop(10)
                                                                    }}
                                                                >情报</p></div>
                                                    }</span>
                                                <span onClick={() => {
                                                    this.setState(prevState => ({
                                                        numflag: false
                                                    }))
                                                    item.num = false;
                                                    item.num2 = !item.num2
                                                }}
                                                    style={{ position: 'relative', top: '-5px' }}
                                                >...</span>
                                                </div>
                                            </td>
                                        </tr>
                                    )
                                })
                            }

                        </tbody>
                    </table>
                    <LocaleProvider locale={zh_CN}>
                        <Pagination defaultCurrent={this.state.current} total={this.state.pagesize} style={{ marginLeft: "27%" }} defaultPageSize={1}
                            onChange={this.itemRender}
                        />
                    </LocaleProvider>
                </div>
            </div>
        )
    }
}

export default syTable